<template>
  <div class="easyd-weixin-Box" id="managerIndex">
    <div class="openHelp" @click="openHelpClick"><i class="fa fa-lightbulb-o fa-lg"></i><span>帮助</span></div>
    <div class="guideActionBox" v-if="isGuide">
        <div class="app_guide">
            <div class="app_guide_content app_guide_1_content" v-if="guideData.guide_1">
              <div class="app_guide_content_help">
                <i class="fa fa-commenting-o fa-lg"></i>帮助：
                <div class="next_guide">
                  <span style="color:red" @click="closeGuideClick">关闭</span>
                  <span>&nbsp;&nbsp;|&nbsp;&nbsp;</span>
                  <span @click="nextGuideClick(++nowGuideIndex)">下一步</span>
                </div>
              </div>
              <div class="app_guide_text">
                <p><b>《请先关注》功能介绍：</b></p>
                <p>您可以将您要销售的商品类产品放置在该菜单所管理的界面中,您可以将您要销售的商品类产品放置在该菜单所管理的界面中,您可以将您要销售的商品类产品放置在该菜单所管理的界面中</p>
              </div>
            </div>
            <div class="app_guide_content app_guide_2_content" v-if="guideData.guide_2">
              <div class="app_guide_content_help">
                <i class="fa fa-commenting-o fa-lg"></i>帮助：
                <div class="next_guide">
                  <span style="color:red" @click="closeGuideClick">关闭</span>
                  <span>&nbsp;&nbsp;|&nbsp;&nbsp;</span>
                  <span @click="nextGuideClick(++nowGuideIndex)">下一步</span>
                </div>
              </div>
              <div class="app_guide_text">
                <p><b>《请先关注》功能介绍：</b></p>
                <p>您可以将您要销售的商品类产品放置在该菜单所管理的界面中,您可以将您要销售的商品类产品放置在该菜单所管理的界面中,您可以将您要销售的商品类产品放置在该菜单所管理的界面中</p>
              </div>
            </div>
            <div class="app_guide_content app_guide_3_content" v-if="guideData.guide_3">
              <div class="app_guide_content_help">
                <i class="fa fa-commenting-o fa-lg"></i>帮助：
                <div class="next_guide">
                  <span style="color:red" @click="closeGuideClick">关闭</span>
                  <span>&nbsp;&nbsp;|&nbsp;&nbsp;</span>
                  <span @click="nextGuideClick(++nowGuideIndex)">下一步</span>
                </div>
              </div>
              <div class="app_guide_text">
                <p><b>《请先关注》功能介绍：</b></p>
                <p>您可以将您要销售的商品类产品放置在该菜单所管理的界面中,您可以将您要销售的商品类产品放置在该菜单所管理的界面中,您可以将您要销售的商品类产品放置在该菜单所管理的界面中</p>
              </div>
            </div>
            <div class="app_guide_content app_guide_4_content" v-if="guideData.guide_4">
              <div class="app_guide_content_help">
                <i class="fa fa-commenting-o fa-lg"></i>帮助：
                <div class="next_guide">
                  <span style="color:red" @click="closeGuideClick">关闭</span>
                  <span>&nbsp;&nbsp;|&nbsp;&nbsp;</span>
                  <span @click="nextGuideClick(++nowGuideIndex)">下一步</span>
                </div>
              </div>
              <div class="app_guide_text">
                <p><b>《请先关注》功能介绍：</b></p>
                <p>您可以将您要销售的商品类产品放置在该菜单所管理的界面中,您可以将您要销售的商品类产品放置在该菜单所管理的界面中,您可以将您要销售的商品类产品放置在该菜单所管理的界面中</p>
              </div>
            </div>
            <div class="app_guide_content app_guide_5_content" v-if="guideData.guide_5">
              <div class="app_guide_content_help">
                <i class="fa fa-commenting-o fa-lg"></i>帮助：
                <div class="next_guide">
                  <span style="color:red" @click="closeGuideClick">关闭</span>
                  <span>&nbsp;&nbsp;|&nbsp;&nbsp;</span>
                  <span @click="nextGuideClick(++nowGuideIndex)">下一步</span>
                </div>
              </div>
              <div class="app_guide_text">
                <p><b>《请先关注》功能介绍：</b></p>
                <p>您可以将您要销售的商品类产品放置在该菜单所管理的界面中,您可以将您要销售的商品类产品放置在该菜单所管理的界面中,您可以将您要销售的商品类产品放置在该菜单所管理的界面中</p>
              </div>
            </div>
            <div class="app_guide_content app_guide_6_content" v-if="guideData.guide_6">
              <div class="app_guide_content_help">
                <i class="fa fa-commenting-o fa-lg"></i>帮助：
                <div class="next_guide">
                  <span style="color:red" @click="closeGuideClick">关闭</span>
                  <span>&nbsp;&nbsp;|&nbsp;&nbsp;</span>
                  <span @click="nextGuideClick(++nowGuideIndex)">下一步</span>
                </div>
              </div>
              <div class="app_guide_text">
                <p><b>《请先关注》功能介绍：</b></p>
                <p>您可以将您要销售的商品类产品放置在该菜单所管理的界面中,您可以将您要销售的商品类产品放置在该菜单所管理的界面中,您可以将您要销售的商品类产品放置在该菜单所管理的界面中</p>
              </div>
            </div>
            <div class="app_guide_content app_guide_7_content" v-if="guideData.guide_7">
              <div class="app_guide_content_help">
                <i class="fa fa-commenting-o fa-lg"></i>帮助：
                <div class="next_guide">
                  <span style="color:red" @click="closeGuideClick">关闭</span>
                  <span>&nbsp;&nbsp;|&nbsp;&nbsp;</span>
                  <span @click="nextGuideClick(++nowGuideIndex)">下一步</span>
                </div>
              </div>
              <div class="app_guide_text">
                <p><b>《请先关注》功能介绍：</b></p>
                <p>您可以将您要销售的商品类产品放置在该菜单所管理的界面中,您可以将您要销售的商品类产品放置在该菜单所管理的界面中,您可以将您要销售的商品类产品放置在该菜单所管理的界面中</p>
              </div>
            </div>
            <div class="app_guide_content app_guide_8_content" v-if="guideData.guide_8">
              <div class="app_guide_content_help">
                <i class="fa fa-commenting-o fa-lg"></i>帮助：
                <div class="next_guide">
                  <span style="color:red" @click="closeGuideClick">关闭</span>
                  <span>&nbsp;&nbsp;|&nbsp;&nbsp;</span>
                  <span @click="nextGuideClick(++nowGuideIndex)">下一步</span>
                </div>
              </div>
              <div class="app_guide_text">
                <p><b>《请先关注》功能介绍：</b></p>
                <p>您可以将您要销售的商品类产品放置在该菜单所管理的界面中,您可以将您要销售的商品类产品放置在该菜单所管理的界面中,您可以将您要销售的商品类产品放置在该菜单所管理的界面中</p>
              </div>
            </div>
            <div class="app_guide_content app_guide_9_content" v-if="guideData.guide_9">
              <div class="app_guide_content_help">
                <i class="fa fa-commenting-o fa-lg"></i>帮助：
                <div class="next_guide">
                  <span style="color:red" @click="closeGuideClick">关闭</span>
                  <span>&nbsp;&nbsp;|&nbsp;&nbsp;</span>
                  <span @click="nextGuideClick(++nowGuideIndex)">下一步</span>
                </div>
              </div>
              <div class="app_guide_text">
                <p><b>《请先关注》功能介绍：</b></p>
                <p>您可以将您要销售的商品类产品放置在该菜单所管理的界面中,您可以将您要销售的商品类产品放置在该菜单所管理的界面中,您可以将您要销售的商品类产品放置在该菜单所管理的界面中</p>
              </div>
            </div>
            <img class="app_guide_img app_guide_1_img" v-if="guideData.guide_1" src="static/images/jiantou_zuo_shang.png" />
            <img class="app_guide_img app_guide_2_img" v-if="guideData.guide_2" src="static/images/jiantou_zuo_shang.png" />
            <img class="app_guide_img app_guide_3_img" v-if="guideData.guide_3" src="static/images/jiantou_you_shang2.png" />
            <img class="app_guide_img app_guide_4_img" v-if="guideData.guide_4" src="static/images/jiantou_you_shang.png" />
            <img class="app_guide_img app_guide_5_img" v-if="guideData.guide_5" src="static/images/jiantou_you_shang.png" />
            <img class="app_guide_img app_guide_6_img" v-if="guideData.guide_6" src="static/images/jiantou_you_shang.png" />
            <img class="app_guide_img app_guide_7_img" v-if="guideData.guide_7" src="static/images/jiantou_you_shang.png" />
            <img class="app_guide_img app_guide_8_img" v-if="guideData.guide_8" src="static/images/jiantou_zuo_shang2.png" />
            <img class="app_guide_img app_guide_9_img" v-if="guideData.guide_9" src="static/images/jiantou_zuo_shang2.png" />
            <div class="app_guide_border app_guide_1_border" v-if="guideData.guide_1"></div>
            <div class="app_guide_border app_guide_2_border" v-if="guideData.guide_2"></div>
            <div class="app_guide_border app_guide_3_border" v-if="guideData.guide_3"></div>
            <div class="app_guide_border app_guide_4_border" v-if="guideData.guide_4"></div>
            <div class="app_guide_border app_guide_5_border" v-if="guideData.guide_5"></div>
            <div class="app_guide_border app_guide_6_border" v-if="guideData.guide_6"></div>
            <div class="app_guide_border app_guide_7_border" v-if="guideData.guide_7"></div>
            <div class="app_guide_border app_guide_8_border" v-if="guideData.guide_8"></div>
            <div class="app_guide_border app_guide_9_border" v-if="guideData.guide_9"></div>
          </div>
    </div>
    <div class="managerInfoBox">
        <div class="managerHeaderBox">
            <img :src="headerImage" v-lazy="headerImage">
        </div>
        <div class="managerUsername">玉面飞龙</div>
    </div>
    <div class="managerStatisticalBox">
        <div class="managerStatisticalContent">
            <div class="managerStatisticalItem" >
                <div class="managerStatisticalItemImage">
                    <img src="~BUSSINESS_IMAGE/images/shouru.png" />
                </div>
                <div class="managerStatisticalItemText">¥99.9</div>
                <div class="managerStatisticalItemTitle" @click="goIncomeDetail">本月收入</div>
            </div>
            <div class="managerStatisticalItem">
                <div class="managerStatisticalItemImage" >
                    <img src="~BUSSINESS_IMAGE/images/kehu.png" style="margin-left:8px;"/>
                </div>
                 <div class="managerStatisticalItemText">¥99.9</div>
                <div class="managerStatisticalItemTitle" @click="goTheMonthAddUser">本月新增客户</div>
            </div>
            <div class="managerStatisticalItem">
                <div class="managerStatisticalItemImage">
                    <img src="~BUSSINESS_IMAGE/images/liulan.png" style="width:35px;position:relative;top:-2px;" />
                </div>
                <div class="managerStatisticalItemText">¥99.9</div>
                <div class="managerStatisticalItemTitle" @click="goBrowseUser">本月浏览数</div>
                
            </div>
            <div class="managerStatisticalItem" style="60px;">
                <div class="managerStatisticalItemText">¥100</div>
                <div class="managerStatisticalItemTitle" @click="goIncomeDetail">总计收入</div>
                
            </div>
            <div class="managerStatisticalItem">
                <div class="managerStatisticalItemText">¥200</div>
                <div class="managerStatisticalItemTitle" @click="goUserList">总计客户</div>
                
            </div>
            <div class="managerStatisticalItem">
                <div class="managerStatisticalItemText">¥1089</div>
                <div class="managerStatisticalItemTitle" @click="goBrowseUser">总浏览数</div>
                
            </div>
        </div>
    </div>
    <div class="managerToolBox">
        <div class="managerToolContent">
            <div class="managerToolTitle">管理工具</div>
            <div class="managerToolMain">
                <div class="managerToolItem">
                    <div class="managerToolItemImage">
                        <img src="~BUSSINESS_IMAGE/images/linshi1.png"/>
                    </div>
                    <div class="managerToolItemText" @click="goShopManager">商品管理</div>
                </div>
                <div class="managerToolItem">
                    <div class="managerToolItemImage">
                        <img src="~BUSSINESS_IMAGE/images/linshi2.png" style="position:relative;top:-2px;"/>
                    </div>
                    <div class="managerToolItemText" @click="goServiceManager">服务卡管理</div>
                </div>
                <div class="managerToolItem">
                    <div class="managerToolItemImage">
                        <img src="~BUSSINESS_IMAGE/images/linshi3.png" style="width:35px;"/>
                    </div>
                    <div class="managerToolItemText" @click="goUserList">客户管理</div>
                </div>
                <div class="managerToolItem">
                    <div class="managerToolItemImage">
                        <img src="~BUSSINESS_IMAGE/images/linshi4.png" style="width:37px;"/>
                    </div>
                    <div class="managerToolItemText" @click="goTemplateList">私信模板</div>
                </div>
                <div class="managerToolItem">
                    <div class="managerToolItemImage">
                        <img src="~BUSSINESS_IMAGE/images/linshi5.png" style="width:35px;position:relative;top:-2px;"/>
                    </div>
                    <div class="managerToolItemText" @click="goIncomeAndExpensesRecord">账本记录</div>
                </div>
                <div class="managerToolItem">
                    <div class="managerToolItemImage">
                        <img src="~BUSSINESS_IMAGE/images/linshi6.png" style="position:relative;top:-1px;"/>
                    </div>
                    <div class="managerToolItemText" @click="goFocusShopDetail">关注商品</div>
                </div>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
export default {
    data(){
        return {
            isGuide     : false,
            guideData : {
                guide_1 : true,
                guide_2 : false,
                guide_3 : false,
                guide_4 : false,
                guide_5 : false,
                guide_6 : false,
                guide_7 : false,
                guide_8 : false,
                guide_9 : false
            },
            nowGuideIndex : 0,

            headerImage : 'static/images/touxiang2.jpg'
        }
    },
    mounted(){

        

        
    },
    methods : {

        openHelpClick(){
            this.isGuide = true;
        },

        nextGuideClick(idx){

            
            this.nowGuideIndex = idx = ( idx >= this.$common.getJsonObjLength(this.guideData) ? 0 : idx ) == 0 ? 0 : this.nowGuideIndex;

            if(this.nowGuideIndex >= 3){
                document.getElementById('managerIndex').scrollTop = 250;
            }else{
                document.getElementById('managerIndex').scrollTop = 0;
            }

            for(var k in this.guideData){
                this.guideData[k] = false;
            }
            this.guideData['guide_' + (idx + 1)] = true;

        },

        closeGuideClick(){
            this.isGuide = false
        },

        //本月收入 + 总计收入
        goIncomeDetail(){
            this.$router.push({
                path : '/incomeDetail'
            })
        },
        //本月新增客户
        goTheMonthAddUser(){
            this.$router.push({
                path : '/theMonthAddUser'
            })
        },
        //浏览客户
        goBrowseUser(){
            this.$router.push({
                path : '/browseUser'
            })
        },
        //总计客户
        goUserList(){
            this.$router.push({
                path : '/userList'
            })
        },
        //商品管理
        goShopManager(){
            this.$router.push({
                path : '/shopManager'
            })
        },
        //服务卡管理
        goServiceManager(){
            this.$router.push({
                path : '/serviceManager'
            })
        },
        //客户管理
        goUserList(){
            this.$router.push({
                path : '/userList'
            })
        },
        //私信模板
        goTemplateList(){
            this.$router.push({
                path : '/templateList'
            })
        },
        //收支记录
        goIncomeAndExpensesRecord(){
            this.$router.push({
                path : '/incomeAndExpensesRecord'
            })
        },
        //关注商品
        goFocusShopDetail(){
            this.$router.push({
                path : '/focusShopDetail'
            })
        }
    }
}
</script>

<style lang="stylus" scoped>
@import '~PUBLIC_CSS'

.app_guide {

   .app_guide_content {
       width 210px
    }

   .app_guide_1_content {
      top 250px
      left 140px
   }

   .app_guide_2_content {
      width 80% 
      top 410px
      left 10%
   }

   .app_guide_3_content {
      top 250px
      left 20px
   }

   .app_guide_4_content {
      width 80% 
      top 165px
      left 10%
   }

   .app_guide_5_content {
      width 80% 
      top 275px
      left 10%
   }

   .app_guide_6_content {
      width 80% 
      top 135px
      left 10%
   }

   .app_guide_7_content {
      width 80% 
      top 255px
      left 10%
   }

   .app_guide_8_content {
      width 80% 
      top 175px
      left 10%
   }

   .app_guide_9_content {
      width 80% 
      top 275px
      left 10%
   }

    .app_guide_1_img {
        top 190px
        left 140px  
    }

    .app_guide_2_img {
        top 340px
        left 260px  
    }

    .app_guide_3_img {
        top 190px
        right 140px  
    }

    .app_guide_4_img {
        top 330px
        left 140px  
    }

    .app_guide_5_img {
        top 440px
        left 140px  
    }

    .app_guide_6_img {
        top 300px
        left 160px  
    }

    .app_guide_7_img {
        top 420px
        left 160px  
    }

    .app_guide_8_img {
        top 340px
        left 180px  
    }

    .app_guide_9_img {
        bottom 120px
        left 180px  
    }

    .app_guide_1_border {
      width 110px
      box-sizing border-box
      left 18px
      height 245px
      top 145px
    }

    .app_guide_2_border {
      width 110px
      box-sizing border-box
      left 132px
      height 245px
      top 145px
    }

    .app_guide_3_border {
      width 110px
      box-sizing border-box
      left 246px
      height 245px
      top 145px
    }

    .app_guide_4_border {
      width 110px
      box-sizing border-box
      left 20px
      height 120px
      bottom 135px    
    }

    .app_guide_5_border {
      width 110px
      box-sizing border-box
      left 20px
      height 120px
      bottom 15px    
    }

    .app_guide_6_border {
      width 110px
      box-sizing border-box
      left 132px
      height 120px
      bottom 135px   
    }

    .app_guide_7_border {
      width 110px
      box-sizing border-box
      left 132px
      height 120px
      bottom 15px   
    }

    .app_guide_8_border {
      width 110px
      box-sizing border-box
      right 16px
      height 120px
      bottom 135px   
    }

    .app_guide_9_border {
      width 110px
      box-sizing border-box
      right 18px
      height 120px
      bottom 15px   
    }


  }


.managerInfoBox {
    width 100%
    height 115px
    margin-top 15px

    .managerHeaderBox {
        width 100%
        height 80px
        text-align center

        img {
            width 80px
            height 80px
            border-radius 40px
            border 2px solid #ccc
            box-shadow: 0px 0px 10px orange;
        }
    }

    .managerUsername {
        width 100%
        height auto
        font-size 16px
        letter-spacing 1px
        margin-top 15px
        font-weight 500
        text-align center
    }
}

.managerStatisticalBox {
    width 100%
    padding-left 15px
    padding-right 15px
    box-sizing border-box;
    height 245px
    margin-top 15px

    .managerStatisticalContent {
        width 100%
        height 100%
        display flex 
        box-sizing border-box;
        border-radius 5px
        flex-wrap wrap
        justify-content: space-between;
        padding-top 10px
        padding-left 10px
        padding-right 10px
        $itemStyle()
      
        .managerStatisticalItem {
            width 30%
            height 130px
            margin-bottom 10px
        }

        .managerStatisticalItemImage {
            width 100%
            height 50px
            text-align center

            img {
                width 40px
                height auto
                margin-top 10px

            }
        }

        .managerStatisticalItemTitle {
            width 100%
            height 40px
            line-height 40px
            border-radius 5px
            background: #FDDE6E;
            text-align center
            margin-top 5px
        }

        .managerStatisticalItemText {
            width 100%
            height 20px
            font-weight 500
            color #000
            margin-top:10px;
            margin-bottom 12px
            font-size 16px
            letter-spacing 1px
            text-align center
        }

    }
}

.managerToolBox {
    width 100%
    height auto
    padding-left 15px
    padding-right 15px
    box-sizing border-box;
    margin-top 20px
    margin-bottom 15px

    .managerToolContent {
        width 100%
        height 100%
        padding-bottom 5px
        border-radius 5px
        $itemStyle()
    }

    .managerToolTitle{
        width 100%
        height 50px
        border-bottom 1px solid #eee
        line-height 50px
        padding-left 15px
        box-sizing border-box
    }

    .managerToolMain {
        width 100%
        height auto
        display flex 
        flex-wrap wrap
        padding-top 10px
        padding-left 10px
        padding-right 10px
        box-sizing border-box;
        justify-content: space-between;

        .managerToolItem {
            width 30%
            height 100px
            margin-bottom 10px
        }

        .managerToolItemImage {
            width 100%
            height 60px
            text-align center

            img {
                width 40px
                height auto
                margin-top 10px

            }
        }

        .managerToolItemText {
            width 100%
            line-height 40px
            height 40px
            color #000
            background: #FDDE6E;
            text-align center
            border-radius 5px
        }
    }
}
</style>
